<template>
  <div class="merchantmanagetype">
    <page-header
      v-bind="merchantTypeHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="merchantTypeContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
import merchantTypeHeaderConfig from '@/views/main/system/merchantManageType/config/header-config'
import PageContent from '@/components/page-content/page-content.vue'
import merchantTypeContentConfig from '@/views/main/system/merchantManageType/config/content-config'
import modalEditAndAddConfig from '@/views/main/system/merchantManageType/config/modal-edit-and-add'
import usePageHeader from '@/hooks/use-page-header'
import type { SingleBtnType } from '@/global/types'
import { SingleBtns } from '@/global/constant'

// ============================= page-header ===============================
const { pageContentRef, searchClick, resetClick } = usePageHeader()

// ============================= page-content ================================
const singleBtnConfig = ref()
// 子传父
// 0.点击表单框的确定按钮
const handleConfirmClick = () => {
  singleBtnConfig.value = null
}

const handleCancelClick = () => {
  singleBtnConfig.value = null
}

// 1.点击单操作按钮
const singleBtnClick = async (type: SingleBtnType) => {
  if (SingleBtns.Add === type || SingleBtns.Edit === type) {
    // 1.1新增和编辑用同一套配置
    singleBtnConfig.value = modalEditAndAddConfig
  }
  // 这里可能完善起来要根据按钮是否能打开对话框，这里写死了
  pageContentRef.value?.setModalStatus(true)
}
</script>

<style scoped>
.merchantmanagetype {
}
</style>
